<template>
    <div class="login-bg">
        <div class="login-from">
            <h2 class="login-title">后台登录</h2>
            <Form ref="loginForm" :model="loginForm" :rules="ruleInline">
                <FormItem prop="user">
                    <Input type="text" v-model="loginForm.loginName" placeholder="Username">
                        <Icon type="ios-person-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem prop="password">
                    <Input type="password" v-model="loginForm.password" placeholder="Password">
                        <Icon type="ios-lock-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem prop="captcha">
                    <Row>
                        <Col span="12"><Input type="text" v-model="loginForm.captcha" placeholder="验证码"/></Col>

                        <Col span="12"><img class="captcha-img" :src="captcha_src" @click="refreshCap"/></Col>
                    </Row>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('loginForm')">登录</Button>
                    <Button style="margin-left: 8px" type="primary" @click="goToRegister">注册</Button>
                </FormItem>
            </Form>
            <span>管理员账号admin 密码admin</span>
        </div>
    </div>
</template>

<script>
    import {getCode} from '@/api';
    import {mapActions} from 'vuex'

    const uuidv1 = require('uuid/v1');
    export default {
        name: "Login.vue",
        created() {
            this.refreshCap()
        },
        data() {
            return {
                loginForm: {
                    loginName: '',
                    password: '',
                    captcha: '',
                    uuid: uuidv1(),
                },
                captcha_src: '',
                ruleInline: {
                    loginName: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ],

                    captcha: [
                        {required: true, message: '请输入验证码', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            goToRegister() {
                this.$router.push({name: 'register'});
            },
            ...mapActions([
                'login'
            ]),
            /** 请求验证码 */
            refreshCap() {
                getCode(this.loginForm.uuid).then(res => {
                    this.captcha_src = res;
                    this.loginForm.captcha = ''
                })
            }
            ,
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.login(this.loginForm).then((data) => {
                            if (data.meta !== undefined && data.meta.isSuccess === false) {
                                this.$Message.error(data.meta.msg);
                                this.refreshCap()
                            } else {
                                this.$router.push({name: 'home'});

                                this.$Message.success('登录成功');
                            }
                        })
                    } else {
                        this.$Message.error('错误!');
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
    .login-from {
        max-height: 600px;
        max-width: 480px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid;
        background: #fff;
        padding: 30px;
        border-radius: 5px;
    }

    .login-bg {
        background: #2c3e50;
        position: relative;
        height: 100vh;
        width: 100vw;
    }

    .login-title {
        text-align: center;
        font-size: 1.8em;
        margin-bottom: 20px;
    }
</style>
